<template>
  <div class="main_box">
    <div class="add_wrap">
      <div class="tit">
        <h2>医院医检信息</h2>
        <el-button
          plain
          size="small"
          type="success"
          icon="fa fa-mail-forward"
          @click="returnList"
        >
          返 回</el-button
        >
      </div>
      <el-form label-width="200px">
        <el-row>
          <el-form-item label="医院名称:" v-if="dataInfo.hospitalName">
            <span>{{ dataInfo.hospitalName }}</span>
          </el-form-item>

          <el-form-item label="科室名称:" v-if="dataInfo.officeName">
            <span>{{ dataInfo.officeName }}</span>
          </el-form-item>

          <el-form-item label="医检名称:" v-if="dataInfo.institutionName">
            <span>{{ dataInfo.institutionName }}</span>
          </el-form-item>
        </el-row>

        <div class="tit">
          <h2>基础信息</h2>
        </div>
        <el-row>
          <el-form-item label="联系人:">
            <span>{{ dataInfo.linkMan}}</span>
          </el-form-item>
          <el-form-item label="联系电话:">
            <span>{{ dataInfo.linkPhone }}</span>
          </el-form-item>
          <el-form-item label="详细地址:">
            <span>{{ dataInfo.address }}</span>
          </el-form-item>
          <el-form-item label="手机号是否必填:">
            <span>{{ formatPhoneType(dataInfo.mustPhone) }}</span>
          </el-form-item>
          <el-form-item label="创建人:">
            <span>{{ dataInfo.createUserName}}</span>
          </el-form-item>
          <el-form-item label="创建时间:">
            <span>{{ dataInfo.createDate }}</span>
          </el-form-item>
          <el-form-item label="修改人:">
            <span>{{ dataInfo.modifyUserName}}</span>
          </el-form-item>
          <el-form-item label="修改时间:">
            <span>{{ dataInfo.modifyDate }}</span>
          </el-form-item>
           
          <el-form-item label="支付状态:">
            <span>{{ formatPayState(dataInfo.payState) }}</span>
          </el-form-item>
          <el-form-item label="公告:">
           <span>{{dataInfo.notice}}</span>
          </el-form-item>
          <el-form-item label="核酸预约二维码:">
            <div id="qrCode" ref="qrCodeDiv"></div>
          </el-form-item>
          <el-form-item label="商户号名称:">
            <span>{{dataInfo.mchName}}</span>
          </el-form-item>
          
        </el-row>
        <div class="tit">
          <h2>采样信息</h2>
        </div>
        <el-row>
          <el-form-item label="项目名称:">
            <span>{{ dataInfo.itemName }}</span>
          </el-form-item>
           <el-form-item label="采样编号:">
            <span>{{ dataInfo.applyId }}</span>
          </el-form-item>
          <el-form-item label="采样价格:">
            <span>{{ dataInfo.itemPrice }}</span>
          </el-form-item>
          <el-form-item label="采样时间:">
            <span>{{ dataInfo.applyTime }}</span>
          </el-form-item>
           <el-form-item label="采样类型:">
            <span>{{ formatSampleType(dataInfo.sampleType) }}</span>
          </el-form-item>
           <el-form-item label="采样总类:">
            <span>{{ formatSampleCategory(dataInfo.sampleCategory) }}</span>
          </el-form-item>
          <el-form-item label="采样状态:">
            <span>{{ formatApplyState(dataInfo.applyState) }}</span>
          </el-form-item>
           <el-form-item label="人员数量:">
            <span>{{ dataInfo.userNum }}</span>
          </el-form-item>
          <el-form-item label="绑码员:">
            <span>{{ dataInfo.collectNames }}</span>
          </el-form-item>
          <el-form-item label="收样员:">
            <span>{{ dataInfo.syUserNames }}</span>
          </el-form-item>
        </el-row>


      </el-form>
    </div>
  </div>
</template>

<script>
import Map from "@/components/Map";
import SampleApplyApi from "@/api/sample/sampleApply";
import QRCode from "qrcodejs2";

export default {
  data() {
    return {
      dataInfo: ""
    };
  },
  components: {
    Map
  },
  methods: {
    getData() {
      SampleApplyApi.getSampleApplyInfo({
        sampleApplyId: this.$route.query.id
      }).then(res => {
        this.dataInfo = res.data;
        this.bindQRCode(this.$route.query.id);
      });
    },
    bindQRCode(id) {
      new QRCode(this.$refs.qrCodeDiv, {
        text:
          "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxe7229f039bfe873b&redirect_uri=http%3A%2F%2Fh5.kanglailab.com%2FnucleicMessage&response_type=code&scope=snsapi_base&state=" +
          id,
        width: 320,
        height: 320,
        colorDark: "#333333", //二维码颜色
        colorLight: "#ffffff", //二维码背景色
        correctLevel: QRCode.CorrectLevel.L //容错率，L/M/H
      });
    },
    formatDate(value) {
      return this.$Utils.formatDate(value, "yyyy-MM-dd hh:mm:ss");
    },
    formatPhoneType(cellValue) {
      if (cellValue == 1) {
        return "否";
      } else if (cellValue == 2) {
        return "是";
      }
    },
    //采样类型(1.单采 5.5人混采 10.10人混采)
    formatSampleType(cellValue) {
      if (cellValue == 1) {
        return "单采";
      } else if (cellValue == 5) {
        return "5人混采";
      } else if (cellValue == 10) {
        return "10人混采";
      } else if (cellValue == 20) {
        return "20人混采";
      }
    },
    formatSampleCategory(cellValue) {
      if (cellValue == 1) {
        return "人";
      } else if (cellValue == 2) {
        return "环境";
      }
    },
    //采样状态：(1.申请中 2.已安排上门 3.已取消 4.已完成)
    formatApplyState(cellValue) {
      if (cellValue == 1) {
        return "申请中";
      } else if (cellValue == 2) {
        return "已安排上门";
      } else if (cellValue == 3) {
        return "已取消";
      } else if (cellValue == 4) {
        return "已完成";
      }
    },
    //支付状态：(1.未支付 2.已付订金 3.已付款 4.已退款 5.已取消)
    formatPayState(cellValue) {
      if (cellValue == 1) {
        return "未支付";
      } else if (cellValue == 2) {
        return "已付订金";
      } else if (cellValue == 3) {
        return "已付款";
      } else if (cellValue == 4) {
        return "已退款";
      } else if (cellValue == 5) {
        return "已取消";
      }
    },
    returnList() {
      this.$store.dispatch("delView", this.$route);
      this.$router.push({ path: "/sample/sampleApplyManagement" });
    }
  },
  mounted() {
    this.getData();
  }
};
</script>
<style lang="scss" src="@/assets/css/views/add.scss" scope></style>
